<template>
    <div class="login-wrap">
        <div class="login-root">
            <div class="login-main">
                <img
                    class="login-one-ball"
                    src="../assets/fca1d5960ccf0dfc8e32719d8a1d80d2.png"
                    alt=""
                />
                <img
                    class="login-two-ball"
                    src="../assets/4bcf705dad662b33a4fc24aaa67f6234.png"
                    alt=""
                />
                <div class="login-container">
                    <div class="login-side">
                        <div class="login-bg-title">
                            <h1>AOE语义化中台</h1>
                            <h3 style="margin: 20px auto">开 箱 即 用 的 低 代 码 平 台</h3>
                        </div>
                    </div>
                    <div class="login-ID">
                        <div class="login-ID-title">🎯 请登录</div>
                        <AoeTab type="brief" v-model="method">
                            <AoeTabItem title="用户名" id="1">
                                <div class="login-ID-form">
                                    <AoeFormItem :label-width="0">
                                        <AoeInput
                                            :allow-clear="true"
                                            prefix-icon="username"
                                            placeholder="用户名"
                                            v-model="loginForm.account"
                                        ></AoeInput>
                                    </AoeFormItem>
                                    <AoeFormItem :label-width="0">
                                        <AoeInput
                                            :allow-clear="true"
                                            prefix-icon="password"
                                            placeholder="密码"
                                            password
                                            type="password"
                                            v-model="loginForm.password"
                                        ></AoeInput>
                                    </AoeFormItem>
                                    <AoeFormItem :label-width="0">
                                        <div style="width: 264px; display: inline-block">
                                            <AoeInput
                                                :allow-clear="true"
                                                prefix-icon="vercode"
                                                placeholder="验证码"
                                                v-model="loginForm.code"
                                            ></AoeInput>
                                        </div>

                                        <div class="login-captcha" @click="toRefreshImg">
                                            <img
                                                style="width: 100%"
                                                src="../assets/login-yzm.jpg"
                                                alt="获取验证码"
                                            />
                                        </div>
                                    </AoeFormItem>
                                    <AoeCheckbox
                                        value=""
                                        name="like"
                                        v-model="remember"
                                        skin="primary"
                                        label="1"
                                        >记住密码</AoeCheckbox
                                    >
                                    <AoeFormItem :label-width="0">
                                        <AoeButton
                                            class="login-ID-form-submit"
                                            theme="primary"
                                            fluid
                                            @click="loginSubmit"
                                            >登录</AoeButton
                                        >
                                    </AoeFormItem>
                                </div>
                            </AoeTabItem>
                            <!--              <AoeTabItem title="二维码" id="2">-->
                            <!--                <div style="width: 200px; height: 250px; margin: 0 auto">-->
                            <!--                  <AoeQrcode-->
                            <!--                    text="https://www.layui-vue.com"-->
                            <!--                    :width="200"-->
                            <!--                    color="#000"-->
                            <!--                    style="margin: 10px 0 20px"-->
                            <!--                  ></AoeQrcode>-->
                            <!--                  <div style="text-align: center; cursor: pointer" @click="toRefreshQrcode">-->
                            <!--                    <AoeIcon name="layui-icon-refresh-three"> </AoeIcon>-->
                            <!--                    刷新二维码-->
                            <!--                  </div>-->
                            <!--                </div>-->
                            <!--              </AoeTabItem>-->
                        </AoeTab>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue';
import {
    AoeTab,
    AoeTabItem,
    AoeFormItem,
    // AoeQrcode,
    // AoeIcon,
    AoeCheckbox,
    AoeInput,
    // AoeLine,
    AoeButton,
} from 'ui-aoe';

const method = ref('1');
const verificationImgUrl = ref('');
const login = ref(false);
const remember = ref(false);
const loginForm = reactive({
    account: '',
    password: '',
    code: '',
});

const loginSubmit = async () => {
    login.value = true;
    // await login
    login.value = false;
    // loadPermissions()
};

const toRefreshImg = async () => {
    // get_verification_img_url
    verificationImgUrl.value = '';
};
</script>

<style scoped>
@import 'login.css';
</style>
